<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点击按钮添加一行 tr</title>
	</head>
	<body>
		<table id="sampleTable" border="1">
			<tr>
				<td>Row1 cell1</td>
				<td>Row1 cell2</td>
			</tr>
			<tr>
				<td>Row2 cell1</td>
				<td>Row2 cell2</td>
			</tr>
		</table>
		<button onclick="fn()">添加新的 tr</button>
		<script type="text/javascript">
			var table = document.getElementById('sampleTable')
			var arr = ['td1', 'td2']
			var n = 2;
			function fn() {
				// insertRow() 在表格中的指定位置插入一个新行，以索引为位置
				var tr = table.insertRow(n)
				n++;
				for(let i = 0; i < arr.length; i++) {
					// insertCell() 在 HTML 表的一行的指定位置插入一个空的 <td> 元素，以索引为位置
					arr[i] = tr.insertCell(i)
					arr[i].innerHTML = 'Row' + n + ' ' + 'cell' + (i + 1)
				}
				// 把 tr 添加到 表格中
				table.appendChild(tr)
			}
		</script>
	</body>
</html>
